<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
    <link rel="stylesheet" href="./components/MySwitch.css">
    <style>
        .box{
            display: flex;
            flex-flow: row nowrap;
            width: 150px;
        }
        .box>div{
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        计算属性实现双向数据共享:保留vue对表单元素的原始操作规则
            - 计算属性可以分解定义 取值 和 赋值操作
            - 计算属性可以为 get 提供 props数据加载返回操作【获取父组件向子组件传递的数据】
            - 计算数学可以为 set 提供 $emit事件调用【触发子组件向父组件传递数据】
            - 同时整合 get 和 set 方法后的计算属性，在组件中可以直接被 v-model使用 【保留了vue对原始DOM操作模式】
        </pre>
        <p>flag:{{ flag }}</p>
        <input type="checkbox" v-model="flag">
        <my-checkbox :model="flag" @update:model="updateFlag"></my-checkbox>
        <hr>
        <p>flag1:{{ flag1 }}</p>
        <input type="checkbox" true-value="是" false-value="否" v-model="flag1">
        <my-checkbox 
            true-value="是" false-value="否"
            :model="flag1" @update:model="updateFlag1"
        ></my-checkbox>
        <hr>
        <p>arr:{{ arr }}</p>
        <input v-model="arr" value="A" type="checkbox" />
        <input v-model="arr" value="B" type="checkbox" />
        <input v-model="arr" value="C" type="checkbox" />
        <input v-model="arr" value="D" type="checkbox" />
        <br>
        <my-checkbox value="A" :model="arr" @update:model="updateArr"></my-checkbox>
        <my-checkbox value="B" :model="arr" @update:model="updateArr"></my-checkbox>
        <my-checkbox value="C" :model="arr" @update:model="updateArr"></my-checkbox>
        <my-checkbox value="D" :model="arr" @update:model="updateArr"></my-checkbox>


    </div>

    <script type="text/x-template" id="checkbox">

        <input type="checkbox" 
            :value="value" 
            :true-value="trueValue" 
            :false-value="falseValue"
            v-model="state"
        >

    </script>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";

        const MyCheckbox = {
            template:"#checkbox",
            emits:["update:model"],
            props:{
                value:{
                    type:String,
                    default:""
                },
                trueValue:{
                    default:true
                },
                falseValue:{
                    default:false
                },
                model:{
                    default(){
                        return []
                    }
                }
            },
            computed: {
                state:{
                    get(){
                        return this.model
                    },
                    set(nv){
                        console.log(" 子组件中的 state set 方法 ",nv)
                        this.$emit("update:model",nv)
                    }
                }
            },
        }

        createApp({
            components: {
                MyCheckbox,
            },
            data(){
                return {
                    flag:true,
                    flag1:"是",
                    arr:["A","D"]
                }
            },
            methods: {
                updateFlag(nv) {
                    this.flag = nv;
                },
                updateFlag1(nv) {
                    this.flag1 = nv;
                },
                updateArr(nv){
                    this.arr = nv;
                }
            },
        }).mount("#app");
    </script>
</body>
</html>